<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>{% block title %}{% endblock %}</title>
  <link rel="stylesheet" href="/static/layui/dist/css/layui.css">
    <style>
        .namespace {
            margin-top: 10px;
        }
        .namespace select, .namespace option {
            width: 150px;
            height: 40px;
            font-size: 22px;
            color: #2F4056;
        }
        .layui-table-cell {
            height: inherit;
        }
    </style>
</head>
<body class="layui-layout-body">
{% csrf_token %}
<div class="layui-layout layui-layout-admin">
  <div class="layui-header layui-bg-cyan">
    <div class="layui-logo" style="color: white;font-size: 26px;font-weight: bold">K8s管理平台</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
        <div class="namespace">
            <select name="namespace" id="nsSelect">
            </select>
        </div>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item"><a href="/logout">注销</a></li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll layui-bg-cyan">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree layui-bg-cyan"  lay-filter="test">

        <li class="layui-nav-item layui-nav-itemed">
          <li class="layui-nav-item"><a href="/">平台概述</a>
         </li>

        <li class="layui-nav-item {% block nav-item-1 %}{% endblock %}">
          <a href="javascript:;">Kubernetes</a>
          <dl class="layui-nav-child">
            <dd><a href="{% url 'node' %}" class="{% block nav-this-1-1 %}{% endblock %}">Nodes</a></dd>
            <dd><a href="{% url 'namespace' %}" class="{% block nav-this-1-2 %}{% endblock %}">Namespaces</a></dd>
            <dd><a href="{% url 'pv' %}" class="{% block nav-this-1-3 %}{% endblock %}">PersistentVolumes</a></dd>
          </dl>
        </li>

        <li class="layui-nav-item {% block nav-item-2 %}{% endblock %}">
          <a href="javascript:;">工作负载</a>
          <dl class="layui-nav-child">
            <dd><a href="{% url 'deployment' %}" class="{% block nav-this-2-1 %}{% endblock %}">Deployments</a></dd>
            <dd><a href="{% url 'daemonset' %}" class="{% block nav-this-2-2 %}{% endblock %}">DaemonSets</a></dd>
            <dd><a href="{% url 'statefulset' %}" class="{% block nav-this-2-3 %}{% endblock %}">SatefulSets</a></dd>
            <dd><a href="{% url 'pod' %}" class="{% block nav-this-2-4 %}{% endblock %}">Pods</a></dd>
          </dl>
        </li>

        <li class="layui-nav-item {% block nav-item-3 %}{% endblock %}">
          <a href="javascript:;">负载均衡</a>
          <dl class="layui-nav-child">
            <dd><a href="{% url 'service' %}" class="{% block nav-this-3-1 %}{% endblock %}">Services</a></dd>
            <!--<dd><a href="" class="">Ingresses</a></dd>-->
          </dl>
        </li>

        <li class="layui-nav-item {% block nav-item-4 %}{% endblock %}">
          <a href="javascript:;">存储与配置</a>
          <dl class="layui-nav-child">
            <dd><a href="{% url 'pvc' %}" class="{% block nav-this-4-1 %}{% endblock %}">PersistentVolumeClaims</a></dd>
            <dd><a href="{% url 'configmap' %}" class="{% block nav-this-4-2 %}{% endblock %}">ConfigMaps</a></dd>
            <dd><a href="{% url 'secret' %}" class="{% block nav-this-4-3 %}{% endblock %}">Secrets</a></dd>
          </dl>
        </li>

      </ul>
    </div>
  </div>

  <div class="layui-body" style="background-color: #edeff0">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        {% block content %}{% endblock %}
    </div>
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © 好好学习
  </div>
</div>
<script src="/static/layui/dist/layui.js"></script>
{% block js %}{% endblock %}
<script>
//JavaScript代码区域
layui.use(['element','layer'], function(){
  var element = layui.element;
  var $ = layui.jquery;
  var layer = layui.layer;

  $.ajax({
      type: "GET",
      url: "{% url 'namespace_api' %}",
      timeout: 5000,
      async: false,
      success: function (res) {
          if(res.code == 0) {
              for(let index in res.data){
                  row = res.data[index];
                  $("#nsSelect").append('<option value=' + row.name + '>' + row.name + '</option>')
              }
              // 设置默认命名空间
              $("#nsSelect").val("default")
          } else {
              $("#nsSelect").append('<option value="default">default</option>');
              $("#nsSelect").attr("disabled", "disabled");
              {#$("#nsSelect").append('<option value=' + res.msg + '>' + res.msg + '</option>')#}
          }
      },
      error: function () {
            layer.msg("服务器接口异常！",{icon: 5})
      }
  });

    // 将当前选择的命名空间保存到本地浏览器session存储，以便其他页面能获取到当前选择的命名空间
    var storage = window.sessionStorage;
    var namespace = storage.getItem("namespace");
    var current_ns = $("#nsSelect").val();
    if (namespace == null) {
        storage.setItem('namespace', current_ns)
    } else {
        $("#nsSelect").val(namespace)
    }

    $('#nsSelect').change(function () {
        var current_ns = $("#nsSelect").val();
        storage.setItem('namespace', current_ns);
        location.reload()
    });

});
</script>
</body>
</html>